<template>
    <div>
        <div class="code-content">
            <div class="banner">
                <span class="rt">人人有责</span>
                <span>防控疫情</span>
            </div>
            <div class="code-cont">
                <div class="header">
                    <div class="left">
                        <div class="name"><span v-if="data.name">{{data.name}}</span>的分控码</div>
                        <div class="time">更新于: <span v-if="data.updateTime">{{data.updateTime}}</span>
                            <!--                            <i class="el-icon-refresh-right refresh" @click="init()"></i>-->
                        </div>
                    </div>
                    <!--                <div class="right">-->
                    <!--                    <el-button type="text" @click="apply()">重新申请 <i class="el-icon-arrow-right"></i>-->
                    <!--                    </el-button>-->
                    <!--                </div>-->
                </div>
                <div class="code">
                    <el-image :src="qrcodePath" :fit="'cover'">
                    </el-image>
                </div>
                <div class="footer" v-if="data.hcode">
                    <div>
                        <div>遇到检查时，请主动出示、配合检查</div>
                    </div>
                </div>
            </div>
            <div class="appointmentTime" v-if="data.appointmentTime&&data.type==2">
                预约就诊时间：<span>{{data.appointmentTime}}</span>
            </div>
<!--            <div class="appointmentTime" v-else-if="data.expertsAppointment&&data.type==1">-->
<!--                <div>预约科室：-->
<!--                    <span>{{data.expertsAppointment.dept}} {{data.expertsAppointment.doctorName}}</span>-->
<!--                </div>-->
<!--                <div>预约时间：-->
<!--                    <span>{{data.expertsAppointment.appointmentDate}} {{data.expertsAppointment.dayStr}}-->
<!--                        {{data.expertsAppointment.visitTime}}</span>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <com-buttom></com-buttom>
    </div>
</template>

<script>
    import {Qrcode} from 'vux'
    import {mapGetters} from 'vuex'
    import comButtom from './buttom'

    export default {
        data() {
            return {
                data: {},
                qrcodePath: ''
            }
        },
        mounted() {
            this.init()
        },
        computed: {
            ...mapGetters([
                'user',
                'codeInfo'
            ])
        },
        methods: {
            init() {
                this.$vux.loading.show()
                this.$http.get('/healthcode/profile').then(result => {
                    if (result.success && result.data) {
                        this.$store.commit('SET_CODEINFO', result.data)
                        this.data = result.data
                        this.qrcodePath = '/_api' + result.data.qrcodePath
                        setTimeout(() => {
                            this.$vux.loading.hide()
                        }, 300)
                    }
                })
            },
            apply() {
                this.$router.replace('/apply')
            }
        },
        components: {
            Qrcode,
            comButtom
        }
    }
</script>

<style scoped lang="less">
    .code-content {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        .banner {
            height: 3rem;
            background-color: #21cd27;
            font-size: .56rem;
            font-weight: bolder;
            color: #fff;
            padding: .3rem;
            letter-spacing: .24rem;

            .rt {
                float: right;
                text-align: right;
                margin-right: -.24rem;
            }
        }

        .code-cont {
            margin: -1.5rem .3rem .5rem;
            padding: .3rem;
            background-color: #fff;
            box-shadow: 0 0 6px -1px #999;
            border-radius: 10px;

            .header {
                overflow: hidden;

                .left {
                    float: left;

                    .name {
                        font-size: .32rem;
                        font-weight: bolder;
                        margin-bottom: .1rem;
                    }

                    .time {
                        color: #999;
                    }

                    .refresh {
                        padding: 0 .1rem;
                    }
                }

                .right {
                    text-align: right;

                    .el-button {
                        color: #999;
                    }
                }
            }

            /deep/ .code {
                .el-image {
                    display: block;
                    width: 52vw !important;
                    height: 52vw !important;
                    margin: .3rem auto;
                }
            }

            .footer {
                text-align: center;
                color: #999;
            }
        }

        .appointmentTime {
            margin: .3rem;
            font-size: .32rem;

            span {
                color: #7b7b7b;
            }
        }
    }
</style>
